<template>
    <div class="dashboard-container">

        <!-- 顶部操作栏 -->
        <div class="search">
            <el-form :inline="true" class="left">
                <el-form-item>
                    <el-button type="primary" @click="handleAdd('create')">
                        <i class="el-icon-plus"></i>
                        新增
                    </el-button>
                </el-form-item>
            </el-form>
            <el-form :inline="true" :model="params" class="right">
                <el-form-item>
                    <el-select 
                        filterable 
                        clearable 
                        v-model="params.cityId" 
                        placeholder="请选择" style="width: 100%;"
                    >
                        <el-option 
                            v-for="item in cityList" 
                            :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" plain @click="getData">
                        查询
                        <i class="el-icon-search"></i>
                    </el-button>
                </el-form-item>
            </el-form>
        </div>

        <!-- 内容栏 -->
        <div class="body">

            <!-- 列表 -->
            <el-table :data="list" v-loading="loading">
                <el-table-column label="名称" prop="name"></el-table-column>
                <el-table-column label="城市" prop="cityName"></el-table-column>
                
                <el-table-column label="创建时间" prop="createTime"></el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="{row}">
                        <el-button type="text" @click="handleAdd('update', row)">
                            <i class="el-icon-edit-outline"></i>
                            编辑
                        </el-button>
                        <el-button type="text danger" @click="handleDelete(row.id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <!-- 分页 -->
            <div class="page">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="params.pageIndex + 1" :page-sizes="[10, 20, 30, 40]" :page-size="params.pageCount"
                    layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
            </div>

        </div>

        <!-- 新增、编辑 -->
        <el-dialog :visible.sync="dialogVisible" :title="dialogType == 'create' ? '创建组团' : '创建组团'"
            :close-on-click-modal="false" @close="dialogVisible = false" width="600px">
            <el-form ref="form" :rules="rules" :model="temp" label-width="100px">
                <el-form-item label="名称" prop="name">
                    <el-input placeholder="请输入组团名称" v-model="temp.name"></el-input>
                </el-form-item>
                <el-form-item label="城市" prop="cityId">
                    <el-select 
                        filterable clearable v-model="temp.cityId" placeholder="请选择" style="width: 100%;"
                        @change="handleChangeCity"
                    >
                        <el-option 
                            v-for="item in cityList" 
                            :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="区域" prop="areaIds">
                    <el-select 
                        filterable clearable v-model="temp.areaIds" placeholder="请选择" style="width: 100%;"
                        multiple
                    >
                        <el-option 
                            v-for="item in areaList" 
                            :key="item.id" :label="item.name"
                            :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submit('form')">提交</el-button>
                    <el-button @click="dialogVisible = false">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

    </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { geoBlockCreate, geoBlockUpdate, geoBlockGetList, geoBlockDelete } from '@/api/geoBlock'
import moment from 'moment'

export default {
    name: 'Staffrole',
    computed: {
        ...mapGetters([
            'name'
        ])
    },
    data() {
        return {
            rules: {
                name: [{ required: true, message: '请输入组团名称', trigger: 'blur' }],
                cityId: [{ required: true, message: '请选择城市', trigger: 'blur' }],
                areaIds: [{ required: true, message: '请选择区域', trigger: 'blur' }],
            },
            params: {
                cityId: '',
                pageCount: 10,
                pageIndex: 0
            },
            total: 0,
            list: [],
            dialogVisible: false,
            dialogType: 'create',
            temp: {
                cityId: '',
                name: '',
                areaIds: []
            },
            loading: false,
            cityList: [],
            areaList: []
        }
    },
    mounted() {
        this.cityList = JSON.parse(localStorage.getItem('city'));
        this.handleSearch();
    },

    methods: {
        // 修改城市，影响区域
        handleChangeCity(val){
            this.areaList = this.cityList.filter(item=>item.id==val)[0].areas
        },
        // 点击删除
        handleDelete(id) {
            this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                await geoBlockDelete({ id })
                this.getData();
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        //提交表单
        submit(formName) {
            this.$refs[formName].validate(async (valid) => {
                if (valid) {
                    if (this.dialogType == 'create') {
                        await geoBlockCreate(this.temp)
                        this.$message.success('创建成功')
                    } else {
                        await geoBlockUpdate(this.temp)
                        this.$message.success('修改成功')
                    }
                    this.handleSearch();
                    this.dialogVisible = false;
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        // 点击新增、编辑
        handleAdd(type, row) {
            this.dialogType = type;
            this.dialogVisible = true;
            if (type == 'create') {
                this.temp = {
                    cityId: '',
                    name: '',
                    areaIds: []
                }
            } else {
                //编辑的时候，需要调用下区域列表筛选
                this.handleChangeCity(row.cityId)
                this.temp = JSON.parse(JSON.stringify(row))
            }
        },
        //修改搜索条件
        handleSearch() {
            this.params.pageIndex = 0;
            this.getData();
        },
        //加载列表数据
        async getData() {
            this.loading = true
            let data = await geoBlockGetList(this.params)
            this.loading = false;
            this.total = data.totalCount;
            this.list = data.list.map(item => {
                item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
                item.cityName = this.cityList.filter(cItem=>cItem.id==item.cityId)[0].name
                return item;
            });
        },
        // 修改每页数量
        handleSizeChange(val) {
            this.params.pageIndex = 0;
            this.params.pageCount = val;
            this.getData();
        },
        // 切换分页
        handleCurrentChange(val) {
            this.params.pageIndex = val - 1;
            this.getData();
        }
    }
}
</script>

<style lang="scss" scoped>
.dashboard {
    &-container {
        margin: 30px;
        position: relative;

        .right {
            position: absolute;
            right: 0;
            top: 0;
        }

        .page {
            padding: 20px 0;
            text-align: center;
        }
    }

    &-text {
        font-size: 30px;
        line-height: 46px;
    }
}
</style>